<template>
	<view class="detail">


		<view v-if="status == 1" class="topStatus">
			<image src="../../static/image/status1.png" mode="" style="width: 150rpx;height: 150rpx;"></image>
			<view class="statustext" style="margin-left: 102rpx;">
				<view class="">
					等待买家付款
				</view>
				<view class="" style="margin-top: 15rpx;">
					<!-- 剩23小时13分自动关闭 -->
				</view>
			</view>
		</view>
		<view v-if="status == 2 " class="topStatus">
			<image src="../../static/image/status1.png" mode="" style="width: 150rpx;height: 150rpx;"></image>
			<view class="statustext" style="margin-left: 102rpx;">
				<view class="">
					等待卖家确认
				</view>
			</view>
		</view>
		<view v-if="status == 3 && pageData.pay_status != 1" class="topStatus">
			<image src="../../static/image/status1.png" mode="" style="width: 150rpx;height: 150rpx;"></image>
			<view class="statustext" style="margin-left: 102rpx;">
				<view class="">
					已完成
				</view>
				<view class="" style="margin-top: 15rpx;">
					可进行转卖或者交割发货操作
				</view>
			</view>
		</view>

		<view v-if="status == 3 && pageData.pay_status == 1" class="topStatus">
			<image src="../../static/image/status1.png" mode="" style="width: 150rpx;height: 150rpx;"></image>
			<view class="statustext" style="margin-left: 102rpx;">
				<view class="">
					已上架
				</view>
			</view>
		</view>


		<view class="dataListitem">
			<view class="bianhao">
				订单编号:{{pageData.order_no}}
			</view>
			<view class="content">
				<image :src="pageData.image" mode="" style="width: 170rpx; height: 170rpx;border-radius: 10rpx;">
				</image>
				<view class="contentRight">
					<view class="name">
						{{pageData.name}}
					</view>
					<view class="price">
						拍中价格:￥{{pageData.all_price}}
					</view>
					<view class="maijia">
						<view class="maijiatext">
							卖家
						</view>
						<view class="maijianame">
							{{pageData.nickname}}<!-- 15512345678 -->
						</view>
					</view>
				</view>
			</view>
			<view class="heng"></view>
			<view class="time">
				下单时间:{{pageData.created_at}}
			</view>
			<view class="itemBottom">
				<view v-if="status == 1" class="itemBottomleft">
					待支付：{{Math.round(pageData.all_price)}}
				</view>
				<view v-if="status == 2 || status == 3" class="itemBottomleft">
					已支付：{{Math.round(pageData.all_price)}}
				</view>
			</view>
		</view>

		<view v-if="statusFlag == false" class="weituo" style="margin-left: 60rpx; margin-top: 20rpx;">
			委托价格：￥{{Math.round(pageData.all_price*1 + pageData.all_price * 0.03) }}
		</view>

		<view v-if="status == 1" class="message">
			<view class="name">
				姓名：{{pageData.check_realname}}
			</view>

			<view class="messageitem">
				<view class="left">
					银行名称：{{pageData.bank_name}}
				</view>
				<view class="right" @click="handleCopy(pageData.bank_name)">
					一键复制
				</view>
			</view>
			<view class="messageitem">
				<view class="left">
					银行卡账号：{{pageData.bank_card == 'null' ? "" : pageData.bank_card}}
				</view>
				<view class="right" @click="handleCopy(pageData.bank_card)">
					一键复制
				</view>
			</view>
			<view class="messageitem">
				<view class="left">
					支付宝：{{pageData.alipay_account == 'null' ? "" : pageData.alipay_account}}
				</view>
				<view class="right" @click="handleCopy(pageData.alipay_account)">
					一键复制
				</view>
			</view>
			<view class="heng"></view>

			<view v-if="pageData.wx_code" class="wxtext">
				微信收款码
			</view>
			<image v-if="pageData.wx_code" :src="pageData.wx_code" mode=""
				style="width: 202rpx;height: 202rpx;margin-top: 8rpx;" @click="handlePreviewImage(pageData.wx_code)">
			</image>
			<view v-if="pageData.wx_code" class="save">
				保存到相册
			</view>

		</view>

		<view v-if="statusFlag == true" class="pz">
			<view class="title" style="display: flex;align-items: center;color: red;">
				<view class="">
					上传凭证
				</view>
				<u-icon name="arrow-downward" color="red"></u-icon>
			</view>
			<view  class="uploadBox">
				<image v-if="payment_voucher_imgs =='' || payment_voucher_imgs ==null" src="/static/image/icon.png"
					mode="" style="width: 48rpx;height: 32rpx;" @click="handleUpload"></image>
				<image v-else :src="payment_voucher_imgs" mode="" style="width: 100%;height: 100%;"
					@click="handlePreviewImage(payment_voucher_imgs)"></image>
				<!-- <view class="" @click="handleUpload">
					更换
				</view> -->
			</view>
		</view>
		<view class="" style="height: 150rpx;"></view>

		<view v-if="status == 1" class="bottomContent">
			<view class="btnbox">
				<view class="btn" @click="$u.debounce(handlecancelorder, 500)">
					取消订单
				</view>
				<view class="btn btns" @click="$u.debounce(handleuploadpaymentimgs, 500)">
					确认上传
				</view>
			</view>

		</view>


		<view v-if="status == 3 && statusFlag == true && pageData.re_sell< 1" class="bottomContent">
			<view class="btnbox">
				<view class="btn btns" @click="handleShangjia">
					委托上架
				</view>
				<view class="btn" @click="handleJIAOgefahuo" style="margin-left: 20rpx;">
					提取货物
				</view>
			</view>
		</view>

		<view v-if="status == 3  && pageData.pay_status == 1" class="bottomContent">
			<view class="btnbox">
				<view class="btn btns" @click="handleJIAOgefahuo" style="margin-left: 250rpx;">
					提取货物
				</view>
			</view>
		</view>

		<view v-if="statusFlag == false" class="bottomContent">
			<view class="btnbox" style="width:100%;justify-content: space-between;margin-left: 0;align-items: center;">
				<view class="">
					支付服务费：{{Math.round(this.shouxu)}}
				</view>
				<view class="btn btns" @click="payTypeflag = true ">
					委托上架
				</view>
				<!-- @click="handleresell" -->
			</view>

		</view>

		<u-popup :show="payTypeflag" mode="bottom" :round="20" bgColor="transparent" @close="payTypeflag = false">
			<view class="auctionBox">
				<view class="title">
					请选择支付方式
				</view>
				<view class="typeBox">
					<view class="itemBox" style="text-align: center;" @click="handleresell(0)">
						<image src="../../static/image/wx.png" mode="" style="width: 80rpx; height: 80rpx;"></image>
						<view class="">
							微信
						</view>
					</view>
					<view class="itemBox" style="text-align: center;" @click="handleresell(1)">
						<image src="../../static/image/zfb.png" mode="" style="width: 80rpx; height: 80rpx;"></image>
						<view class="">
							支付宝
						</view>
					</view>
				</view>

				<view class="btns" style="background: #A2A2A2;" @click="payTypeflag = false">
					取消
				</view>
			</view>
		</u-popup>

		<view v-html="htmlData" v-if="htmlData"></view>

	</view>
</template>
<script>
	import {
		buyorderdetail,
		uploadpaymentimgs,
		cancelorder,
		resell,
		getsettings,
		userinfo
	} from "@/api/api.js"
	export default {
		data() {
			return {
				status: null,
				pageData: {},
				pageId: null,
				payment_voucher_imgs: "",
				statusFlag: true,
				shouxu: "",
				wx_code: "",
				payTypeflag: false,
				htmlData: "",
			}
		},
		onLoad(options) {
			if (!uni.getStorageSync("token")) {
				uni.reLaunch({
					url: "../login/index"
				})
				return
			}
			console.log("options", options)
			this.pageId = options.id
			// this.handlebuyorderdetail()
			this.token = uni.getStorageSync("token")
			this.handleGetuserinfo()
		},
		onShow() {
			this.handlebuyorderdetail()
		},
		methods: {
			async handleGetuserinfo() {
				let res = await userinfo()
				console.log("555555", res)
				// this.wx_code = res.data.wx_code
			},

			//图片放大
			handlePreviewImage(vaule) {
				uni.previewImage({
					current: 0,
					urls: [vaule] //必须是网址路径，否则加载不出来，如：http：或https：
				});
			},
			// 一键复制
			handleCopy(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => {
						//复制成功的回调函数
						uni.showToast({
							title: "复制成功",
							icon: "none",
							duration: 1500
						});
					}
				});
			},
			handleShangjia() {
				this.statusFlag = false
			},
			async handlebuyorderdetail() {
				let res = await buyorderdetail({
					id: this.pageId,
				})
				console.log("买品详情", res)
				this.pageData = res.data
				this.status = res.data.status
				this.payment_voucher_imgs = res.data.payment_voucher_imgs  == null || res.data.payment_voucher_imgs == '' ? '' : res.data.payment_voucher_imgs
				this.handlegetsettings()
				// this.status = 3
				// this.payment_voucher_imgs = res.data.  回显上传凭证没有
			},
			async handlegetsettings() {
				let res = await getsettings({
					id: 5
				})
				this.shouxu = ((res.data * this.pageData.all_price) / 100).toFixed(2)
				// console.log("手续费",this.shouxu)
			},
			handleUpload() {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log("tempFilePaths", tempFilePaths)
						uni.uploadFile({
							url: 'http://admin.jinsekeji.com.cn/api/login/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								// "Content-Type": "application/form-data",
								"Authorization": 'Bearer' + that.token
							},
							success: (uploadFileRes) => {
								// console.log("33333", uploadFileRes)
								that.payment_voucher_imgs = (JSON.parse(uploadFileRes.data).data)
								console.log("图片", that.payment_voucher_imgs)
							},
							fail(e) {
								console.log("上传图片", e)
							}
						});
					}
				});
			},
			async handleuploadpaymentimgs() {
				if (this.payment_voucher_imgs == "") {
					uni.showToast({
						title: "请上传付款截图!",
						icon: "none",
						duration: 1500
					});
					return
				}
				let res = await uploadpaymentimgs({
					payment_voucher_imgs: this.payment_voucher_imgs,
					id: this.pageId
				})
				if (res.code == 1000) {
					uni.showToast({
						title: "上传成功",
						icon: "none",
						duration: 1500
					});

					setTimeout(() => {
						this.handlebuyorderdetail()
					}, 2000)
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					});
				}
			},
			async handlecancelorder() {
				let res = await cancelorder({
					id: this.pageId
				})
				if (res.code == 1000) {
					uni.showToast({
						title: "取消成功",
						icon: "none",
						duration: 1500
					});
					setTimeout(() => {
						uni.redirectTo({
							url: "../home/myOreder"
						})
					}, 2000)
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					});
				}
			},
			async handleresell(index) {
				let res = await resell({
					id: this.pageId
				})
				if (res.code == 1000) {
					// console.log("支付返回数据", res.data)
					this.htmlData = res.data
					if (index == 1) {
						this.ZfbPay(res.data)
					} else {
						this.wxPay(res.data)
					}

				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					});
				}
			},
			ZfbPay(value) {
				this.$nextTick(() => {
					//这里就是提交表单唤起支付宝，中括号中的name名称，要与后端给的form表单name名称一致，
					document.forms['alipay_submit'].submit();
				})
			},
			wxPay() {

			},
			handleJIAOgefahuo() {
				uni.redirectTo({
					url: `./jiaogefahuo?id=${this.pageId}`
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.auctionBox {
		width: 100%;
		height: 514rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 32rpx;
		box-sizing: border-box;

		.typeBox {
			display: flex;
			justify-content: space-around;
			margin-top: 80rpx;

		}

		.title {
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 48rpx;
			width: 100%;
			text-align: center;
		}

		.btns {
			width: 480rpx;
			height: 80rpx;
			background: red;
			border-radius: 512rpx 512rpx 512rpx 512rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			margin: 0 auto;
			margin-top: 24rpx;
		}
	}

	.uploadBox {
		width: 202rpx;
		height: 202rpx;
		background: #F1F1F1;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		text-align: center;
		line-height: 202rpx;
		margin-top: 16rpx;
	}

	.detail {
		.topStatus {
			width: 100%;
			height: 198rpx;
			background: #FFFFFF;
			padding: 24rpx 0;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 104rpx;

			.statustext {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #359691;
				line-height: 48rpx;
			}
		}

		.dataListitem {
			width: 690rpx;
			;
			height: 384rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin-bottom: 30rpx;
			padding: 18rpx 30rpx;
			box-sizing: border-box;
			margin: 0 auto;
			margin-top: 14rpx;

			.bianhao {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #707070;
				line-height: 28rpx;
			}

			.content {
				display: flex;
				width: 100%;
				margin-top: 20rpx;

				.contentRight {
					height: 170rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 30rpx;

					.name {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 28rpx;
					}

					.price {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #707070;
						line-height: 28rpx;
					}

					.maijia {
						display: flex;
						height: 36rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						opacity: 1;
						border: 2rpx solid #359691;

						.maijiatext {
							width: 78rpx;
							height: 36rpx;
							background: #359691;
							color: #ffffff;
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 36rpx;
							text-align: center;
						}

						.maijianame {
							width: 292rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							color: #707070;
							line-height: 36rpx;
							text-align: center;
						}
					}
				}
			}

			.heng {
				width: 100%;
				height: 1rpx;
				background-color: #D8D8D8;
				margin-top: 20rpx;
			}

			.time {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #707070;
				line-height: 28rpx;
				margin-top: 20rpx;
			}

			.itemBottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;

				.itemBottomleft {
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 28rpx;
				}

			}
		}

		.message {
			width: 690rpx;
			height: 557rpx;
			background: #FFFFFF;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			margin: 0 auto;
			margin-top: 14rpx;
			padding: 24rpx 20rpx;
			box-sizing: border-box;

			.name {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #359691;
				line-height: 40rpx;
				margin-bottom: 18rpx;
			}

			.messageitem {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 22rpx;

				.left {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #8D8D8D;
					line-height: 28rpx;
				}

				.right {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #359691;
					line-height: 28rpx;
				}
			}

			.heng {
				width: 100%;
				height: 1rpx;
				background-color: #E2E2E2;
			}

			.wxtext {
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
				margin-top: 18rpx;
			}

			.save {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 34rpx;
				margin-top: 10rpx;
				margin-left: 42rpx;
			}
		}

		.pz {
			width: 100%;
			padding: 18rpx 52rpx;
			background-color: #ffffff;
			margin-top: 20rpx;

			.title {
				font-size: 35rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: red;
				line-height: 42rpx;
			}
		}



		.bottomContent {
			width: 100%;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			padding: 36rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: constant(safe-area-inset-bottom);
			/* 兼容 iOS 设备 */
			padding-bottom: env(safe-area-inset-bottom);

			.btnbox {
				display: flex;
				margin-left: 190rpx;

				.btn {
					width: 240rpx;
					height: 70rpx;
					border-radius: 512rpx 512rpx 512rpx 512rpx;
					opacity: 1;
					border: 2rpx solid #359691;
					font-size: 36rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 400;
					color: #359691;
					line-height: 70rpx;
					text-align: center;
				}

				.btns {
					background-color: #359691;
					color: #ffffff;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>